<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>管理员登录 - KING神电竞</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f0f0f0; }
        .login-container { max-width: 400px; margin: 50px auto; padding: 40px; background: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .form-group { margin-bottom: 20px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; }
        button { width: 100%; padding: 12px; background: #667eea; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
        button:hover { background: #5a6fd8; }
        .admin-panel { display: none; background: white; margin: 20px auto; padding: 20px; border-radius: 10px; max-width: 800px; }
        .admin-tabs { display: flex; gap: 10px; margin-bottom: 20px; }
        .tab-btn { padding: 10px 20px; background: #f0f0f0; border: none; border-radius: 5px; cursor: pointer; }
        .tab-btn.active { background: #667eea; color: white; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
    </style>
</head>
<body>
    <div class="login-container" id="loginPanel">
        <h2>管理员登录</h2>
        <form id="loginForm">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" id="username" value="admin" required>
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" id="password" value="king888" required>
            </div>
            <button type="submit">登录</button>
        </form>
    </div>

    <div class="admin-panel" id="adminPanel">
        <h2>KING神电竞 - 管理后台</h2>
        
        <div class="admin-tabs">
            <button class="tab-btn active" onclick="showTab('bookings')">预约管理</button>
            <button class="tab-btn" onclick="showTab('prices')">价格管理</button>
            <button class="tab-btn" onclick="showTab('homepage')">首页设置</button>
            <button class="tab-btn" onclick="showTab('settings')">店铺设置</button>
        </div>

        <div id="bookingsTab" class="tab-content active">
            <h3>预约管理</h3>
            <p>预约管理功能已激活！</p>
        </div>

        <div id="pricesTab" class="tab-content">
            <h3>价格管理</h3>
            <p>价格管理功能已激活！</p>
        </div>

        <div id="homepageTab" class="tab-content">
            <h3>首页设置</h3>
            <p>首页设置功能已激活！</p>
        </div>

        <div id="settingsTab" class="tab-content">
            <h3>店铺设置</h3>
            <p>店铺设置功能已激活！</p>
        </div>

        <button onclick="logout()" style="margin-top: 20px;">退出登录</button>
    </div>

    <script>
        function handleLogin(e) {
            e.preventDefault();
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();
            
            if (username === 'admin' && password === 'king888') {
                document.getElementById('loginPanel').style.display = 'none';
                document.getElementById('adminPanel').style.display = 'block';
                alert('✅ 管理员登录成功！');
            } else {
                alert(`❌ 登录失败！\n\n当前输入：\n用户名: "${username}"\n密码: "${password}"\n\n请检查输入是否正确`);
            }
        }

        function showTab(tabName) {
            document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
            
            document.getElementById(tabName + 'Tab').classList.add('active');
            event.target.classList.add('active');
        }

        function logout() {
            document.getElementById('loginPanel').style.display = 'block';
            document.getElementById('adminPanel').style.display = 'none';
            alert('已退出登录');
        }

        document.getElementById('loginForm').addEventListener('submit', handleLogin);
    </script>
</body>
</html>